<template>
	<view class="content">
       <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper>
		<view class="header align-center w100 justify-center ft20 " :style="'top:'+menuTop+'px;height:'+menuHeight+'px;line-height:'+menuHeight+'px'">
			<view class="" @click="back">
				<uv-icon name="arrow-left" color="#fff"></uv-icon>
			</view>
			<view class="flex1" style="color: #fff;text-align: center;">
				商品详情
			</view>
			
		</view>
        <view class="plr13  ">
            <view class="  mt12 bgWhite radius6  pt15 pb15 plr10" >
				<view class="price "  v-if="detail.show_status=='1'">
					￥<text style="font-weight: bold;font-size: 42rpx;">{{detail.qishu_price}}</text>×{{detail.qishu||0}}期<text class="ft12 ml10" style="color: #999;">*一期为3个月</text>
					
				</view>
				<view class="mb10 mt5"  v-if="detail.show_status=='1'" style="color: #49806F;">
					<text class="ml10 " >付款周期：{{detail.zhouqi}}月</text>
					
				</view>
                <text class="clamp1" style="font-weight: bold;font-size: 30rpx;color: #222222;" >{{detail.title}}</text>    
            </view>
            <view class="bgWhite radius8 pt15 plr10 ft16 mt12  pb10" >
				<view class="moduleTitle ft16 ">产品详情</view>
				<uv-parse :content="detail.xiangqing" :tagStyle="style"></uv-parse>
            </view>
        </view>
		<view class="" style="height: 130rpx;">
			
		</view>
        <view class=" bgWhite paybtn" v-if="detail.show_status==1">
            <view class="justify-between align-center">
                <view @click="pay" class="onlinePay">立即购买</view>
            </view>
        </view>
			<customTab :value="1" v-else ></customTab>
	</view>
</template>

<script>
	import customTab from '../../components/customTab.vue'
	export default {
		components:{
			customTab
		},
		data() {
			return {
				list: [],
				chain: false,
				value: 0,
                indicatorDots: false,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
                style:{
                    img:"max-width:100%"
                },
				menuTop:uni.getStorageSync('menuInfo').menuTop,
				menuHeight:uni.getStorageSync('menuInfo').menuHeight,
			}
		},
		onLoad(opt) {
                if(opt.id) this.id = opt.id
                this.getMain()
		},
		methods: {
			async getMain() {
                const {data,code}  =   await this.$api.goodsMain({id:this.id })
                if(code==1){
                    console.log(data)
                    this.detail = data
					this.imgList= data.images? data.images.split(','):[]
                    this.detail.xiangqing =decodeURIComponent(this.detail.xiangqing)  
					this.detail.xiangqing =this.detail.xiangqing.replaceAll("+"," ")
                }
			},
			pay(){
				if(this.detail.is_buy=='1'){
				uni.showModal({
					title:'提示',
					content:this.detail.is_buy_info,
					success:function(res){
						
					}
				})
					return
				}
				uni.navigateTo({
					url:'/pages/orderConfirm/index?id='+ this.id+'&type='+this.detail.qianming_status
				})
			},
			back(){
				uni.navigateBack()
			}
			
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
	
    .paybtn{
        box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(0,0,0,0.08);
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 20rpx 22rpx;
        background-color: #fff;
        .onlinePay{
			width: 706rpx;
			height: 88rpx;
			background: #49806F;
			border-radius: 12rpx;
			line-height: 88rpx;
            color: #fff;
            text-align: center;
        }
            
        .freebtn{
            text{
                color: #FF9012;
            }
        }
      
    }
    .moduleTitle{
        font-weight: 600;
        color: #000000;
        line-height: 54rpx;
		font-size: 28rpx;
        color: #333333;
		position: relative;
    }
    .moduleTitle::before{
		clear: both;
		content: '';
		position: absolute;
		width: 4rpx;
		height: 28rpx;
		background-color: #49806F;
		left: -20rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		
	}
    .swiper{
		height: 750rpx;
        image{
            width: 100%;
            height: 750rpx;
        }
    }
	.header{
		position: fixed;
		z-index: 99;
		
	}
	.price{
		font-size: 26rpx;
		color: #49806F;
	}
</style>